<template>
  <view class="page">
    <view class="header">病友圈</view>
    <view class="post-list">
      <!-- 帖子列表 -->
      <view v-for="post in posts" :key="post.id" class="post">
        <view class="post-title">{{ post.title }}</view>
        <view class="post-body">{{ post.body }}</view>
        <view class="post-actions">
          <button @click="likePost(post.id)">点赞 ({{ post.likes }})</button>
          <button @click="commentPost(post.id)">评论</button>
        </view>
      </view>
    </view>
    <button @click="goToCreatePostPage">发布帖子</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      posts: [
        { id: 1, title: "如何应对癌症治疗", body: "在治疗过程中应该注意什么？", likes: 5 },
        { id: 2, title: "糖尿病控制经验", body: "如何通过饮食控制糖尿病？", likes: 3 }
      ]
    };
  },
  methods: {
    likePost(postId) {
      // 模拟点赞增加
      const post = this.posts.find(p => p.id === postId);
      if (post) post.likes += 1;
    },
    commentPost(postId) {
      console.log("评论帖子", postId);
      uni.navigateTo({ url: `/pages/community_of_patients/comments?id=${postId}` });
    },
    goToCreatePostPage() {
      uni.navigateTo({ url: "/pages/community_of_patients/create-post" });
    }
  }
};
</script>

<style scoped>
/* 页面的基础样式 */
.page {
  padding: 10px;
  box-sizing: border-box;
  max-width: 100%;
  background-color: #f9f9f9;
}

/* 页面顶部标题样式 */
.header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
  color: #333;
}

/* 帖子列表样式 */
.post {
  background-color: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #ddd;
}

/* 帖子标题样式 */
.post-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/* 帖子内容样式 */
.post-body {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

/* 帖子底部操作按钮样式 */
.post-actions {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

/* 单个按钮样式 */
button {
  background-color: #3f8fe0;
  color: white;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 48%;
}

button:hover {
  background-color: #2c6da0;
}

button:active {
  background-color: #1f4a6e;
}

/* 创建帖子按钮样式 */
button:last-child {
  margin-top: 20px;
  width: 100%;
  background-color: #28a745;
}

/* 适配小屏设备 */
@media (max-width: 768px) {
  /* 页面内边距调整 */
  .page {
    padding: 5px;
  }

  /* 标题字体稍微缩小 */
  .header {
    font-size: 18px;
    margin-bottom: 10px;
  }

  /* 帖子标题字体调整 */
  .post-title {
    font-size: 14px;
  }

  /* 帖子内容字体调整 */
  .post-body {
    font-size: 12px;
  }

  /* 操作按钮布局调整 */
  .post-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* 调整按钮大小和间距 */
  button {
    padding: 12px 0;
    font-size: 12px;
    margin-bottom: 10px;
  }

  /* 确保最后一个按钮占满宽度 */
  button:last-child {
    margin-top: 10px;
    width: 100%;
  }
}
</style>
